<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head> 
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="icon" th:href="@{/vendor/img/reset1.png}" type="image/x-icon"/>
    <link th:href="@{/vendor/bootstrap/css/bootstrap.min.css}" rel="stylesheet" type="text/css" />
    <link  th:href="@{/vendor/bootstrap/css/bootstrap-table.min.css}" rel="stylesheet" type="text/css"/>
    <link  th:href="@{/vendor/bootstrap/css/dataTables.bootstrap.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/vendor/jquery/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap.min.js}"></script>
    <script th:src="@{/vendor/bootstrap/js/bootstrap-table.min.js}"></script>
       <script th:src="@{/vendor/bootstrap/js/bootstrap-table-zh-CN.js}"></script>
       <script th:src="@{/vendor/bootstrap/js/jquery.dataTables.min.js}"></script>
       <script th:src="@{/vendor/bootstrap/js/dataTables.bootstrap.js}"></script>
       <!--<script th:src="@{/vendor/bootstrap/table-extensions/editable/bootstrap-table-editable.js}"></script>-->
    <!--self-->
    <script th:src="@{/js/theamleaf/table.js}"></script>

    <script >

        $(function () {
                 //1.初始化Table
                var oTable = new TableInit();
                oTable.Init();
            //2.初始化Button的点击事件
           // var oButtonInit = new ButtonInit();
            //oButtonInit.Init();
            
            $("#btn_add").click(function () {
                window.location.href="/thymeleaf/userinput/";
            });

            $("#btn_delete").click(function () {
                deleteUserList();
            });

            $("#btn_edit").click(function () {
                //获取所有被选中的记录
                var rows = $("#ArbetTable").bootstrapTable('getSelections');
                if(rows.length==0){
                    alert("请选择一条要修改的记录！")
                    return ;
                }
               else if (rows.length>1) {
                    alert("请仅选择一条记录！");
                    return;
                }
                else{
                    window.location.href = "/thymeleaf/useredit?id=" +rows[0]['id'] ;
                }
            });
            /**查询**/
            $("#btn_query").click(function () {
                $("#ArbetTable").bootstrapTable('refresh', {url: '/thymeleaf/userlistjson'});

            });

             });

   /* $(function () {

        $('#table').bootstrapTable({
            url: '/thymeleaf/userlistjson',
            columns: [
                {
                    field: 'id',
                    title: 'ID'
                },
            {
                field: 'name',
                title: '姓名'
            }, {
                field: 'age',
                title: '年龄'
            }, {
                field: 'password',
                title: '密码'
            }, ]
        });
    });*/

    </script>
</head>
<body>
<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default">
        <div class="panel-heading">查询条件</div>
        <div class="panel-body">
            <!--<form id="formSearch" class="form-horizontal">-->
                <div class="form-group" style="margin-top:15px">
                    <label class="control-label col-sm-1" for="userid">ID</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="userid"/>
                    </div>
                    <label class="control-label col-sm-1" for="username">姓名</label>
                    <div class="col-sm-3">
                        <input type="text" class="form-control" id="username" />
                    </div>
                    <div class="col-sm-4" style="text-align:left;">
                        <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button>
                    </div>
                </div>
            <!--</form>-->
        </div>
    </div>

    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn btn-default" >
            <span class="glyphicon glyphicon-plus" aria-hidden="true"> </span>新增
        </button>
        <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn_delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="tb_departments"></table>
</div>
<!--<iframe width='560' height='315' th:src="@{http://172.19.12.111:10080/api/play/44891d90cdb911e7b267f1a67664dd0b}" frameborder='0' allowfullscreen></iframe>-->
    <!--<p th:text="'Hellothymeleaf, ' + ${name} + '!'" />-->

<table  id="table"> </table>
<div>
<table id="ArbetTable"  class="bootstrapTable"></table>
</div>
<!--<span >数据绑定方式</span>
<table data-toggle="table">
    <thead>
    <tr>
        <th>Item ID</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Item 1</td>
        <td>$1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Item 2</td>
        <td>$2</td>
    </tr>
    <tr th:each="user:${users}">
        <td th:text=" ${user.name}" ></td>
        <td th:text="${user.age}" >js</td>
        <td th:text=" ${user.password}" > application</td>
    </tr>

    </tbody>
</table>-->
   <!-- <div class="container">

        <div class="row">
            <section>
                <div class="page-header">
                    <h1>Bootstrap Table</h1>
                </div>

                <div class="col-lg-12">
                    <form id="defaultForm" method="post"  class="form-horizontal">
                        <fieldset>
                            <div class="form-group">
                                <div class="col-lg-3"><a type="button" th:href="'/thymeleaf/userinput/'" >添加 </a></div>
                                <div class="col-lg-5">
                                    <table  class="table table-bordered table-striped table-hover">
                                        <tr>

                                            <th>用户姓名</th>
                                            <th>年龄</th>
                                              <th>密码</th>
                                        </tr>
                                           <tr th:each="user:${users}">
                                            <td th:text=" ${user.name}" ></td>
                                            <td th:text="${user.age}" >js</td>
                                            <td th:text=" ${user.password}" > application</td>
                                        </tr>


                                    </table>
                                </div>
                            </div>
                        </fieldset>


                    </form>
                </div>
            </section>
        </div>



    </div>-->

</body>
</html>
